<script setup lang="ts">
import { computed, ref } from 'vue';
import { Card } from '@/components';
import { useHomeStore } from '@/stores/homeStore';
import { formatNumber } from '@/utils/common';
import { CartDrawer, DelicacyModal, ReviewModal } from './components';
import { data } from './helper';

const store = useHomeStore();
const cartItemCount = computed(() => store.cartItemCount);
const cartTotal = computed(() => store.cartTotal);

const menu_list: any = ref([]);
menu_list.value = data;

const onClick = ({ type, id }: { type: String; id: String }) => {
    switch (type) {
        case 'detail':
            onDetail(id);
            break;
        case 'select':
            onSelect(id);
            break;
        default:
            onDetail(id);
    }
};
const onDetail = (id: String) => {
    is_detail.value = true;
    const menu = menu_list.value.find((i: any) => i.id === id);
    menu_info.value = menu;
    selectedTags.value = menu.default_standard;
    showModal();
};
const onSelect = (id: String) => {
    is_detail.value = false;
    const menu = menu_list.value.find((i: any) => i.id === id);
    if (!menu.standards) {
        store.addToCart(menu, 1);
        return;
    }
    menu_info.value = menu;
    selectedTags.value = menu.default_standard;
    showModal();
};

// 商品详情
const open = ref<boolean>(false);
const is_detail = ref<boolean>(false);
const menu_info = ref<any>({});
const selectedTags = ref<any>({});
const showModal = () => {
    open.value = true;
};
const onCancel = () => {
    open.value = false;
    selectedTags.value = {};
};
const addToCart = (count: number) => {
    store.addToCart(menu_info.value, count, selectedTags.value);
};
const selectTag = (standardName: string, tag: string) => {
    selectedTags.value[standardName] = tag;
};

const review_open = ref(false);
const showReview = () => {
    review_open.value = true;
};
const closeReview = () => {
    review_open.value = false;
};

// 购物车
const dash_open = ref(false);
const showDash = () => {
    dash_open.value = true;
};
const onClose = () => {
    dash_open.value = false;
};
</script>

<template>
    <div class="relative h-full">
        <div class="grid h-full w-full auto-rows-min grid-cols-5 gap-4 overflow-auto pr-4 pb-4">
            <Card
                v-for="menu in menu_list"
                :key="menu.id"
                :id="menu.id"
                :name="menu.name"
                :introduction="menu.introduction"
                :img_url="menu.cover_image"
                :price="menu.price"
                :price_all="menu.price"
                :top_number="menu.top_number"
                :is_multi_standard="!!menu.standards?.length"
                @onClick="onClick"
            />
        </div>
        <div
            class="absolute right-0 bottom-0 flex h-[86px] min-w-[465px] items-center gap-4 rounded-tl-3xl bg-[#00000066] px-5 backdrop-blur-lg"
        >
            <a-badge
                :count="cartItemCount"
                :number-style="{
                    color: '#fff',
                    fontSize: '16px',
                    top: '6px',
                    insetInlineEnd: '4px',
                    boxShadow: '0 0 #0000'
                }"
            >
                <div class="flex h-[52px] w-[52px] items-center justify-center rounded-full bg-[#7D7D7D91]">
                    <i class="fantec_font ft_ShopCart !text-[28px] leading-none" />
                </div>
            </a-badge>
            <p class="mr-auto flex items-center text-4xl font-semibold">
                <span class="mr-1 text-base">¥</span>{{ formatNumber(cartTotal) }}
            </p>
            <a-button
                type="primary"
                class="!h-12 !rounded-xl !px-5 !text-lg !text-white"
                :class="cartItemCount === 0 ? 'btn-bg-gradient-disabled' : 'btn-bg-gradient'"
                :disabled="cartItemCount === 0"
                @click="showDash"
            >
                {{ cartItemCount > 0 ? '今すぐ注文' : '商品を選択してください' }}
            </a-button>
            <!-- btn-bg-gradient   btn-bg-gradient-disabled   -->
            <!-- <a-button class="btn-bg-gradient-disabled !h-12 !rounded-xl !px-5 !text-lg !text-white" type="primary" disabled>
                商品を選択してください
            </a-button> -->
        </div>
    </div>

    <!-- 商品详情 -->
    <DelicacyModal
        :open="open"
        :is_detail="is_detail"
        :menu_info="menu_info"
        :selectedTags="selectedTags"
        @onClose="onCancel"
        @onAdd="addToCart"
        @onSelectTag="selectTag"
    />

    <ReviewModal :open="review_open" @onClose="closeReview" />

    <!-- 购物车 -->
    <CartDrawer :open="dash_open" @onClose="onClose" @onOpenReview="showReview" />
</template>

<style lang="scss" scoped>
.border-gradient {
    background: linear-gradient(170deg, #ffffff66 6%, #bdbdbd1a 29%, #ffffff33 92%);
    // background: linear-gradient(180deg, #ffffff66 6%, #bdbdbd69 29%, #ffffff52 92%);
    // background:
    //     linear-gradient(93.17deg, rgba(255, 255, 255, 0.3) 0.92%, rgba(50, 53, 58, 0.3) 45.7%, rgba(6, 19, 45, 0.3) 95.71%),
    //     linear-gradient(93.17deg, rgba(6, 19, 45, 0) 0.92%, rgba(255, 255, 255, 0.3) 100%);
}
</style>
